<template>
	<!-- 订单留言记录 -->
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="60%" @close="onCancel">
		<el-table :data="logList" border style="width: 100%">
      <el-table-column label="留言时间" align="center">
        <template #default="scope">{{ timeDictionary(scope.row.create_time) }}</template>
      </el-table-column>
      <el-table-column label="留言人" align="center">
        <template #default="scope">{{ Number(scope.row.type) == 1 ? '后台':'用户' }}</template>
      </el-table-column>
      
      <el-table-column label="内容" align="center" prop="content">
      </el-table-column>
      <el-table-column label="附件" align="center">
        <template #default="scope">
          <el-image
            v-for="(item, index) in scope.row.images"
            :key="index + ''"
            :src="item"
            :preview-src-list="scope.row.images"
            :style="`width:60px;height:60px;margin-right: 10px;`"
            fit="scale-down"
            :z-index="3000"
          />
        </template>
      </el-table-column>
    </el-table>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { orderMessageList } from '/@/api/admin1';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

export default {
	name: 'ViewLeaveMessageDialog',
	setup() {
		const state = reactive({
			title: '查看订单留言',
			open: false,
			logList: [],
		});

		/********** 点击事件(on开头) **********/
		// 取消按钮
		const onCancel = () => {
			state.open = false;
			state.logList = [];
		};
		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any) => {
			console.log(config);
			state.open = true;
			state.title = `订单【${config.order_sn}】查看留言`
			_orderMessageList({
				order_sn: config.order_sn
			});
		};

		/********** 网络事件 **********/
		// 留言记录
		const _orderMessageList = (_data: object) => {
			orderMessageList(_data).then((res: any) => {
				console.log('留言记录', res);
				state.logList = res.list
					.map((item: any) => {
						let images = item.images ? item.images.split(',') : [];
						return {
							...item,
							images,
						};
					})
			});
		};

		return {
			openDialog,
			onCancel,
			timeDictionary,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
